<template>
	<u-popup :show="status" :overlay="false" bgColor="transparent">
		<!-- <view :style="{height:$u.sys().windowHeight + 'px',backgroundColor:bgcolor}"> -->
		<view :style="{height:'100vh',backgroundColor:bgcolor}">
			<!-- 状态栏 -->
			<view :style="'height:'+$u.sys().statusBarHeight+'px'"></view>
			<!-- 导航 -->
			<view class="topview" style="height: 90rpx;">
				<view class="cancelview" @click="cancel">
					<u-icon
						name="arrow-left"
						size="40rpx"
						color="#ffffff"
					></u-icon>
				</view>
				<text class="title">{{title}}</text>
				<view @click="finish" v-if="right" class="finishbtn">{{$t("common.complete")}}</view>
				<view style="padding: 0 50rpx;" v-else></view>
			</view>
			<slot></slot>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default:'' 
			},
			bgcolor:{
				type: String,
				default:'#121325'
			},
			right:{
				type: Boolean,
				default:true
			}
		},
		data() {
			return {
				status:false
			}
		},
		mounted() {
			
		},
		methods: {
			show(){
				this.status = true
			},
			finish(){
				this.$emit('complete')
			},
			cancel(){
				this.$emit('cancel')
				this.status = false;
				uni.hideKeyboard()
			}			
		},
	}
</script>

<style scoped lang="scss">
	.topview{
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		.cancelview{
			border-radius: 8rpx;
			font-size: 30rpx;
			padding: 6rpx 10rpx;
		}
		.title{
			font-size: 32rpx;
			margin-left: 30rpx;
		}
		.finishbtn{
			font-size: 30rpx;
			padding: 6rpx 10rpx;
		}
	}
</style>
